<template>
  <div class="min-h-screen bg-gray-50">
    <NavBar />
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <router-view />
    </main>
  </div>
</template>

<script setup>
import NavBar from './components/NavBar.vue'
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --secondary: #10b981;
  --accent: #f59e0b;
  --dark: #1e293b;
  --light: #f8fafc;
}

body {
  font-family: 'Inter', sans-serif;
  @apply text-gray-800;
}

.smooth-transition {
  transition: all 0.3s ease-in-out;
}

.card-hover {
  @apply transform hover:-translate-y-1 hover:shadow-lg smooth-transition;
}

/* 新增全局按钮样式 */
.btn {
  @apply px-6 py-2 rounded-lg smooth-transition font-medium;
}
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white shadow-md;
}
.btn-outline {
  @apply border border-primary text-primary hover:bg-primary/10;
}

/* 课程卡片样式 */
.course-card {
  @apply bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow p-5 border border-gray-100;
}

/* 标签页样式 */
.tabs {
  @apply border-b border-gray-200 mb-6;
}
.tab-item {
  @apply px-4 py-2 font-medium text-gray-500 cursor-pointer transition-colors;
}
.tab-item.active {
  @apply text-blue-600 border-b-2 border-blue-600;
}
</style>